<template>
  <div class="Upanddown">
    <div id="svgBox">
      <div id="svgTop"></div>
      <div id="svgResize"></div>
      <div id="svgDown" style="border-top: 1px solid #b5b9a9"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Upanddown',
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    dragControllerDiv() {
      var svgResize = document.getElementById('svgResize');
      var svgTop = document.getElementById('svgTop');
      var svgDown = document.getElementById('svgDown');
      var svgBox = document.getElementById('svgBox');
      svgResize.onmousedown = function (e) {
        var startY = e.clientY;
        svgResize.top = svgResize.offsetTop;
        document.onmousemove = function (e) {
          var endY = e.clientY;
          var moveLen = svgResize.top + (endY - startY);
          var maxT = svgBox.clientHeight - svgResize.offsetHeight;
          if (moveLen < 30) moveLen = 30;
          if (moveLen > maxT - 30) moveLen = maxT - 30;
          svgResize.style.top = moveLen;
          svgTop.style.height = moveLen + 'px';
          svgDown.style.height = svgBox.clientHeight - moveLen - 5 + 'px';
        };
        document.onmouseup = function (evt) {
          document.onmousemove = null;
          document.onmouseup = null;
          svgResize.releaseCapture && svgResize.releaseCapture();
        };
        svgResize.setCapture && svgResize.setCapture();
        return false;
      };
    },
  },
};
</script>

<style scoped lang="less">
.Upanddown {
  height: 100%;
}
#svgBox {
  width: 700px;
  height: 100%;
  position: relative;
  overflow: hidden;
  #svgTop {
    height: calc(30% - 5px);
    width: 100%;
    float: left;
    overflow: auto;
    background-color: rgb(124, 200, 130);
  }

  #svgResize {
    position: relative;
    height: 5px;
    width: 100%;
    cursor: s-resize;
    float: left;
  }

  #svgDown {
    height: 70%;
    width: 100%;
    background-color: rgb(128, 142, 68);
    float: left;
    overflow: hidden;
  }
}
</style>
